<template>
  <!-- 租户入驻 -->
  <div class="main-box">
    <a-card :bordered="false">
      <a-row :gutter="48">
        <a-col :md="8" :sm="24">
          <div class="filter-container">
            <div class="label">业务角色：</div>
            <div class="input-container">
              <a-select
                placeholder="请选择业务角色"
                style="width: 100%;"
                v-model="pagination.roleTypeIds"
                @select="onRoleType">
                <a-select-option v-for="(item, index) in roleTypeList" :key="item.roleId">{{ item.name
                }}</a-select-option>
              </a-select>
            </div>
          </div>
        </a-col>
        <a-col :md="8" :sm="24">
          <div class="filter-container">
            <div class="label">组织名称：</div>
            <div class="input-container">
              <a-input v-model="pagination.organizationName" placeholder="请输入组织名称"></a-input>
            </div>
          </div>
        </a-col>
        <a-col :md="8" :sm="24">
          <div class="filter-container">
            <div class="label">组织编号：</div>
            <div class="input-container">
              <a-input v-model="pagination.organizationCode" placeholder="请输入组织编号"></a-input>
            </div>
          </div>
        </a-col>

        <div class="filter-container lesseeAdd">
          <a-button type="primary" class="btn" @click="onSearch">查询</a-button>
          <a-button class="btn" @click="onReset">重置</a-button>
        </div>

      </a-row>
      <div class="filter-container">
        <template>
          <div>
            <a-button type="primary" @click="add" v-checkBtn="'lessee:add'">
              新增租户
            </a-button>
          </div>
        </template>
      </div>
      <a-back-top />
      <div>
        <template>
          <a-table
            :columns="columns"
            :data-source="dataSource"
            bordered
            :loading="loading"
            :rowKey="(record) => { return record.tenantId }"
            :scroll="{ x: true }"
            :pagination="pagination">
            <template slot="roleTypes" slot-scope="text,record">
              <div class="tag-box">
                <a-tag
                  color="blue"
                  class="tag-item"
                  v-for="(item, index) in record.roleTypes"
                  :key="index">{{ item.roleTypeName }}</a-tag>
              </div>
            </template>
            <span slot="action" slot-scope="text, record">
              <template v-if="record.overdue">
                <a-tag color="orange">已过期</a-tag>
              </template>
              <template v-else>
                <a href="javascript:;" @click="onRoles(record)" v-checkBtn="'lessee:role:edit'">分配角色</a>
                <a-divider type="vertical" />
                <a href="javascript:;" @click="onDel(record)" v-checkBtn="'lessee:del'">删除</a>
              </template>

            </span>
          </a-table>
        </template>
      </div>
      <saveModal ref="saveModal" v-if="dialog.save" @success="tableData" @close="dialog.save = false"></saveModal>
      <powerModal ref="powerModal"></powerModal>
    </a-card>

    <!-- <a-row :gutter="24" style="height: 400px;width: 100%;">
            <a-col :sm="24" :md="24" :xl="24">
                <div class="send-display-container">
                    <div class="filter-container">
                        <div class="label">业务角色：</div>
                        <div class="input-container">
                            <a-select placeholder="请选择业务角色" style="width: 100%;" v-model="pagination.roleTypeIds"
                                @select="onRoleType">
                                <a-select-option v-for="(item, index) in roleTypeList" :key="item.roleId">{{ item.name
                                }}</a-select-option>
                            </a-select>
                        </div>
                        <div class="label">组织名称：</div>
                        <div class="input-container">
                            <a-input v-model="pagination.organizationName" placeholder="请输入组织名称"></a-input>
                        </div>
                        <div class="label">组织编号：</div>
                        <div class="input-container">
                            <a-input v-model="pagination.organizationCode" placeholder="请输入组织编号"></a-input>
                        </div>
                        <a-button type="primary" class="btn" @click="onSearch">查询</a-button>
                        <a-button class="btn" @click="onReset">重置</a-button>
                    </div>
                    <div class="filter-container">
                        <template>
                            <div>
                                <a-button type="primary" @click="add" v-checkBtn="'lessee:add'">
                                    新增租户
                                </a-button>
                            </div>
                        </template>
                    </div>
                    <a-back-top />
                    <div>
                        <template>
                            <a-table :columns="columns" :data-source="dataSource" bordered :loading="loading"
                                :rowKey="(record) => { return record.tenantId }" :scroll="{ x: true }"
                                :pagination="pagination">
                                <template slot="roleTypes" slot-scope="text,record">
                                    <div class="tag-box">
                                        <a-tag color="blue" class="tag-item" v-for="(item, index) in record.roleTypes"
                                            :key="index">{{ item.roleTypeName }}</a-tag>
                                    </div>
                                </template>
                                <span slot="action" slot-scope="text, record">
                                    <a href="javascript:;" @click="onRoles(record)" v-checkBtn="'lessee:role:edit'">角色</a>
                                    <a-divider type="vertical" />
                                    <a href="javascript:;" @click="onDel(record)" v-checkBtn="'lessee:del'">删除</a>
                                </span>
                            </a-table>
                        </template>
                    </div>
                </div>
                <saveModal ref="saveModal" v-if="dialog.save" @success="tableData" @close="dialog.save = false"></saveModal>
                <powerModal ref="powerModal"></powerModal>
            </a-col>
        </a-row> -->
  </div>
</template>

<script>

import { getTenants, deleteTenants } from '@/api/lessee'
import saveModal from './save'
import powerModal from './powerSave'
import { Modal } from 'ant-design-vue'
import { getRoleTypes } from '@/api/base'
import { getPlatformRoles } from '@/api/resource'

export default {
    components: { saveModal, powerModal },
    data () {
        return {
            roleTypeList: [],
            columns: [
                {
                    title: '组织名称',
                    dataIndex: 'organizationName',
                    key: 'organizationName',
                    align: 'center',
                    width: 200
                },
                {
                    title: '角色',
                    dataIndex: 'roleTypes',
                    key: 'roleTypes',
                    align: 'center',
                    width: 200,
                    scopedSlots: { customRender: 'roleTypes' }
                },
                {
                    title: '组织编号',
                    dataIndex: 'organizationCode',
                    key: 'organizationCode',
                    align: 'center',
                    width: 200
                },
                {
                    title: '创建时间',
                    dataIndex: 'fromDate',
                    key: 'fromDate',
                    align: 'center',
                    width: 150
                },
                {
                    title: '操作',
                    width: '150px',
                    dataIndex: 'action',
                    align: 'center',
                    // fixed: 'right',
                    width: 150,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            dataSource: [],
            dialog: {
                save: false
            },
            loading: false,
            pagination: {
                // 分页配置
                pageSize: 6, // 每页显示的条数
                showQuickJumper: true, // 是否可以快速跳转到指定页
                showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                current: 1, // 当前页数
                total: 10, // 总条数
                roleTypeIds: undefined,
                organizationName: '',
                organizationCode: '',
                onChange: this.handlePageChange // 页码改变时的回调函数
            },
            // 查询参数
            queryParam: {
                current: 1, // 当前页数
                pageSize: 6, // 每页显示的条数
                name: '',
                description: ''
            }
        }
    },
    // created() {

    // },
    mounted () {
        this.tableData()
        getPlatformRoles().then(res => {
            if (res.code == 200) {
                this.roleTypeList = res.data
                // this.treeData = res.data
                // this.treeData.forEach(el => {
                //     el.children = []
                // });
            }
        })
        // getRoleTypes(this.queryParam).then((res) => {
        //     console.log(res)
        //     if (res.code == 200) {
        //         this.roleTypeList = res.data.datas
        //     }
        // })
    },
    methods: {
        // 维护租户平台内置业务角色
        onRoles (row) {
            this.$nextTick(() => {
                this.$refs.powerModal.openPower(row)
            })
        },
        // 搜索
        onSearch () {
            this.pagination.current = 1
            this.pagination.pageSize = 6
            this.tableData()
        },
        // 重置
        onReset () {
            this.pagination = {
                // 分页配置
                pageSize: 6, // 每页显示的条数
                showQuickJumper: true, // 是否可以快速跳转到指定页
                showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                current: 1, // 当前页数
                total: 10, // 总条数
                roleTypeIds: '',
                organizationName: '',
                organizationCode: '',
                onChange: this.handlePageChange // 页码改变时的回调函数
            }
            this.tableData()
        },
        // 访问资源类型
        onRoleType (e) {
            this.pagination.roleTypeIds = e
        },
        handlePageChange (page, pageSize) {
            this.pagination.current = page
            this.tableData()
        },
        // 新增
        add () {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open()
            })
        },
        // 编辑
        onEdit (row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open('edit').setData(row)
            })
        },
        onClosed () {
            this.dialog.save = false
        },

        comparDate (dateValue) {
            return new Date().getTime() >= new Date(dateValue).getTime() + 3600 * 1000 * 24
        },
        tableData () {
            const _this = this
            this.loading = true
            this.dialog.save = false
            const par = {
                ...this.pagination
            }
            if (par.roleTypeIds == undefined) par.roleTypeIds = ''
            getTenants(par).then(res => {
                if (res.code == 200) {
                    const data = res.data.datas
                    data.forEach(item => {
                        item.overdue = _this.comparDate(item.thruDate)
                    })
                    this.dataSource = data
                    this.pagination.total = res.data.total
                }
                this.loading = false
            })
        },

        onDel (row) {
            const _this = this
            Modal.confirm({
                title: '删除信息',
                content: '确定要删除吗？',
                onOk: () => {
                    deleteTenants(row.tenantId).then(res => {
                        if (res.code == 200) {
                            _this.tableData()
                            _this.$message.success('删除成功')
                        } else {
                            _this.$message.error(res.message)
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="less" >
.tag-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .tag-item {
        margin-bottom: 4px;
    }
}

.main-box {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    border-radius: 2px;
}

.send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
}

.filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
        padding-right: 20px;

        white-space: nowrap;
    }

    .input-container {
        width: 300px;
        margin-right: 20px
    }

    .btn {
        margin-right: 20px;
    }
}

.lesseeAdd {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 25px;
}

/deep/ .ant-modal {
    min-width: 700px;
    margin-left: 30%;
}
</style>
